<template>
  <div>
    <el-button
      @click="add"
      type="success"
      icon="el-icon-circle-plus-outline"
    >
      新增
    </el-button>
    <list ref="list" @edit="edit"></list>
    <info ref="info" :info="info" @update="update"></info>
  </div>
</template>

<script>
import list from './list.vue'
import info from './info.vue'
export default {
  data() {
    return {
      info: {
        isShow: false,
        type: 'add'
      }
    }
  },
  components: {
    list,
    info
  },
  methods: {
    add() {
      this.info.isShow = true;
      this.info.type = 'add';
      // 给子组件的表单赋值
      this.$refs.info.setValue({
        rolename: "",
        menus: "",
        status: 1,
      });
    },
    edit(info) {
      this.info.isShow = true;
      this.info.type = 'edit';
      // 给子组件的表单赋值
      this.$refs.info.setValue(info);
    },
    // 更新列表
    update() {
      this.$refs.list.getMenu();
    }
  }
}
</script>

<style>

</style>